<template>
	<view class="container">
		<image class="topImage" mode="aspectFit" src="/static/logo加粗版.png"></image>
		<view class="register-form">
			<!-- 用户名 -->
			<view class="inputView">
				<image class="nameImage" src="/static/name.png"></image>
				<label class="loginLab">用户名</label>
				<input class="inputText" placeholder="请输入用户名" v-model="username" />
			</view>
			<view class="line"></view>

			<!-- 密码 -->
			<view class="inputView">
				<image class="keyImage" src="/static/key.png"></image>
				<label class="loginLab">密码</label>
				<input class="inputText" type="password" placeholder="请输入密码" v-model="password" />
			</view>
			<view class="line"></view>

			<!-- 确认密码 -->
			<view class="inputView">
				<image class="keyImage" src="/static/key.png"></image>
				<label class="loginLab">确认密码</label>
				<input class="inputText" type="password" placeholder="请再次输入密码" v-model="confirmPassword" />
			</view>
			<view class="line"></view>

			<!-- 邮箱 -->
			<view class="inputView">
				<image class="emailImage" src="/static/email.png"></image>
				<label class="loginLab">邮箱</label>
				<input class="inputText" type="email" placeholder="请输入邮箱" v-model="email" />
			</view>
			<view class="line"></view>

			<!-- 电话号码 -->
			<view class="inputView">
				<image class="phoneImage" src="/static/phone.png"></image>
				<label class="loginLab">手机号</label>
				<input class="inputText" type="tel" placeholder="请输入手机号" v-model="phone" />
			</view>
			<view class="line"></view>

			<!-- 注册按钮 -->
			<view class="loginBtnView">
				<button class="loginBtn" type="primary" @click="register">注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				confirmPassword: '',
				email: '',
				phone: ''
			};
		},
		methods: {
			// 注册函数
			register() {
				// 检查输入框是否为空
				if (!this.username || !this.password || !this.confirmPassword || !this.email || !this.phone) {
					uni.showToast({
						title: '输入项不能为空',
						icon: 'none'
					});
					return;
				}
				// 检查密码和确认密码是否一致
				if (this.password !== this.confirmPassword) {
					uni.showToast({
						title: '两次输入的密码不一致',
						icon: 'none'
					});
					return;
				}
				// 构建请求体
				const registerData = {
					username: this.username,
					password: this.password,
					email: this.email,
					phone: this.phone
				};

				// 发送请求到后端注册接口，注意这里方法应该是POST
				uni.request({
					url: 'http://localhost:8080/user/register', // 后端注册API地址
					method: 'GET', // 应使用POST方法
					data: registerData,
					success: (res) => {
						const number=res.data
						if (number==1) {
						      // 注册成功
						      uni.showToast({
						        title: '注册成功',
						        icon: 'success',
						        duration: 2000
						      });
						      setTimeout(function() {
						        // 跳转至登录页面
						        uni.navigateTo({
						          url: '/pages/login/login'
						        });
						      }, 2000); // 延迟2秒后跳转
						    } 
						else if(number==0){//用户已存在
						      uni.showToast({
						        title: '用户已存在',
						        icon: 'none',
						        duration: 2000
						      });
						      setTimeout(function() {
						        uni.navigateTo({
						          url: '/pages/login/login'
						        });
						      }, 2000); // 延迟2秒后跳转
						    }
						else{
						      uni.showToast({
						        title: res.data.message || '注册失败',
						        icon: 'none',
						        duration: 2000
						      });
						    }
						  },
					fail: (err) => {
						console.error(err);
					}
				});
			}
		}
	};
</script>

<style>
	page {
		height: 100%;
		background-image: url(https://flowerart-img.oss-cn-chengdu.aliyuncs.com/%E8%83%8C%E6%99%AF.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}
	.topImage {
		margin-top: 30rpx;
		width: 300px;
		height: 80px;
	}
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.register-form {
		margin-top: 20rpx;
		width: 90%; /* 可根据实际设计调整 */
	}

	.inputView {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.nameImage,
	.keyImage,
	.emailImage,
	.phoneImage {
		margin-left: 15px;
		width: 40rpx;
		height: 40rpx;
	}

	.loginLab {
		margin-left: 15px;
		margin-top: 5rpx;
		height: 130rpx;
		font-size: 28rpx;
		line-height: 130rpx;
	}

	.inputText {
		flex: 1;
		padding: 10rpx;
		font-size: 28rpx;
		margin-left: 200rpx;
		text-align: right;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #cccccc;
		margin-top: 10rpx;
	}

	.loginBtnView {
		margin-top: 40rpx;
	}

	.loginBtn {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		font-size: 32rpx;
		border-radius: 30rpx;
	}

</style>